<template>
    <div class="box">
        <div class="move-box" ref='moveBox'></div>
        <button class="move" @click="animate">点击播放</button>
    </div>
</template>

<script>
export default {
    name: 'page-box',
    data () {
        return {
            isPlay: false
        }
    },
    methods: {
        animate () {
            this.isPlay = !this.isPlay;
            if (this.isPlay) {
                this.$refs.moveBox.classList.remove('animatedCancel');
                this.$refs.moveBox.classList.add('animated');
            } else {
                this.$refs.moveBox.classList.remove('animated');
                this.$refs.moveBox.classList.add('animatedCancel')
            }
        }
    }
}
</script>

<style lang='less'>
    .move-box {
        height: 60px;
        width: 60px;
        background: #2970ff;
        opacity: .8;
        transition: .5s transform cubic-bezier(0.165, 0.84, 0.44, 1);

        &.animated {
            animation: rotateAndTranslateX .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
        &.animatedCancel {
            animation: animatedCancel .5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
    }

    @keyframes rotateAndTranslateX {
        0% {
            transform: rotate(0deg) translateX(0px);
        }
        60% {
            transform: rotate(0deg) translateX(105px);
        }
        100% {
            transform: rotate(45deg) translateX(105px);
        }
    }

    @keyframes animatedCancel {
        from {
            transform: rotate(45deg) translateX(45px);
        }
        to {
            transform: rotate(0deg) translateX(0px);
        }
    }
</style>